<template>
  <xn-dialog custom-class="user-bind-phone-dialog" title="绑定手机号" :visible.sync="selfVisible" @close="onDialogHide">
    <div class="content">
      <el-form ref="form" :model="form" label-width="100px" label-suffix="：" :rules="rules">
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="form.telephone" placeholder="请输入手机号" :maxlength="11" clearable></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="smCode">
          <el-input v-model="form.smCode" placeholder="请输入验证码" :maxlength="6" clearable>
            <el-button slot="append" class="send-btn" :class="{ disabled: sendCodeStatus === 'send' }" @click="sendCode">
              {{ codeBtnDisplay }}
            </el-button></el-input
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="footer" slot="footer">
      <el-button type="default" @click="selfVisible = false">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
  </xn-dialog>
</template>
<script>
import { getBingPhoneCode, modifyTelephone } from '@api/modules/user.js'
import XnDialog from '@com/xnDialog.vue'
import { phoneReg, checkCodeReg } from '@utility/regExps.js'
import { USER_PHONE_EDIT_TYPE } from '@utility/dict'

export default {
  name: 'UserBindPhoneDialog',
  components: {
    XnDialog,
  },
  props: {
    visible: {
      type: Boolean,
    },
  },
  data() {
    return {
      selfVisible: false,
      isForceEdit: false,
      form: {
        telephone: '',
        smCode: '',
      },
      rules: {
        // 验证规则
        telephone: [
          {
            required: true,
            message: '请输入有效的手机号',
            trigger: 'blur',
            pattern: phoneReg,
          },
        ],
        smCode: [
          {
            required: true,
            message: '请输入有效的验证码',
            trigger: 'blur',
            pattern: checkCodeReg,
          },
        ],
      },
      cutdownSec: 0,
      sendCodeStatus: 'init', // init, send, retry
      cutdownTimer: null,
    }
  },
  computed: {
    codeBtnDisplay() {
      if (this.sendCodeStatus === 'init') {
        return '发送验证码'
      } else if (this.sendCodeStatus === 'send') {
        return this.cutdownSec + ' 秒'
      }
      return '重新发送'
    },
    userInfo() {
      return this.$store.getters.userInfo
    },
  },
  watch: {
    visible(visible) {
      this.selfVisible = visible
      if (!visible) {
        this.form.telephone = ''
        this.form.smCode = ''
        this.clearCutdownTimer()
        this.sendCodeStatus = 'init'
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    onDialogHide() {
      this.$emit('update:visible', false)
      this.$emit('closed')
    },
    sendCode() {
      if (this.sendCodeStatus === 'send') {
        return
      }
      this.$refs.form.validateField('telephone', invalid => {
        if (!invalid) {
          getBingPhoneCode(USER_PHONE_EDIT_TYPE.bind, this.form.telephone).then(res => {
            if (res.status === 200) {
              this.startCutdown()
            }
          })
        }
      })
    },
    startCutdown() {
      this.clearCutdownTimer()
      this.sendCodeStatus = 'send'
      this.cutdownSec = 60
      this.cutdownTimer = setInterval(() => {
        this.cutdownSec--
        if (this.cutdownSec <= 0) {
          this.clearCutdownTimer()
          this.sendCodeStatus = 'retry'
        }
      }, 1000)
    },
    clearCutdownTimer() {
      if (this.cutdownTimer) {
        clearInterval(this.cutdownTimer)
      }
    },
    onSubmit() {
      console.log('onSubmit...')
      this.$refs.form.validate(valid => {
        // valid 全为 true即执行以下操作
        if (valid) {
          modifyTelephone(this.form.telephone, this.form.smCode, USER_PHONE_EDIT_TYPE.bind).then(res => {
            if (res.status === 200) {
              this.$message.success('手机号绑定成功！')
              this.selfVisible = false
              this.userInfo.telephone = this.form.telephone
              this.$store.commit('setUserInfo', this.userInfo)
            }
          })
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.user-bind-phone-dialog {
  ::v-deep &.el-dialog {
    width: 500px !important;
  }
  .content {
    height: 100%;
    padding-top: 20px;
    padding-right: 30px;
    .send-btn {
      width: 120px;
      &.disabled {
        cursor: not-allowed;
      }
    }
    .footer {
      text-align: center;
      .btn-sure {
        padding: 10px 50px;
      }
    }
  }
}
</style>
